<template>
    <div class="order-actions">
        <!-- <van-dialog v-model="confirmPickupDialogVisible" title="确认收货" show-cancel-button>
             <template #default>确认收货后，订单交易完成，欠款将立即到达商家账户。</template>
         </van-dialog>-->
        <van-button round plain size="small" v-if="showRefunds" @click="handleRefunds">批量退款</van-button>
        <van-button round plain size="small" v-if="showTryAgainButton" @click="handleTryAgain">再来一单</van-button>
        <van-button round plain size="small" v-if="showQueryShipment" @click="handleQueryShipment">查看物流</van-button>
        <van-button round plain size="small" type="primary" v-if="showConfirmReceipt" @click="handleConfirmReceipt">确认收货</van-button>
        <van-button round plain size="small" type="primary" v-if="showReview">评价</van-button>
        <van-button round plain size="small" v-if="showChangeButton">修改订单</van-button>
        <van-button round plain size="small" v-if="showCancelButton" @click="handleCancel">取消订单</van-button>
        <van-button round size="small" type="primary" v-if="showPayButton" @click="handlePay">去支付</van-button>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import { cart, order, security } from "@mall/api-services"
  import { Button, Dialog, Toast } from "vant"
  import {
    isAwaitingFulfillment,
    isAwaitingPayment,
    isAwaitingPickup,
    isCancelled,
    isClosed,
    isCompleted,
    isPartiallyShipped,
    isShipped,
  } from "@/utils/order"

  export default {
    name: "OrderActions",
    components: {
      [Button.name]: Button,
      [Dialog.name]: Dialog,
    },
    props: {
      order: order.Order,
    },
    computed: {
      orderStatus() {
        return this.order.status
      },
      showReview() {
        const { orderStatus } = this
        return isCompleted(orderStatus)
      },
      showConfirmReceipt() {
        const { orderStatus } = this
        return isAwaitingPickup(orderStatus) || isShipped(orderStatus)
      },
      showQueryShipment() {
        const { orderStatus } = this
        return !isAwaitingPayment(orderStatus) && !isAwaitingFulfillment(orderStatus) && !isCancelled(orderStatus)
      },
      showRefunds() {
        const { orderStatus } = this
        return !isAwaitingPayment(orderStatus) && !isCancelled(orderStatus) && !isClosed(orderStatus)
      },
      showTryAgainButton() {
        const { orderStatus } = this
        return isAwaitingFulfillment(orderStatus) || isAwaitingPickup(orderStatus)
          || isShipped(orderStatus) || isPartiallyShipped(orderStatus)
          || isCompleted(orderStatus) || isCancelled(orderStatus) || isClosed(orderStatus)
      },
      showChangeButton() {
        const { orderStatus } = this
        return isAwaitingPayment(orderStatus)
      },
      showCancelButton() {
        const { orderStatus } = this
        return isAwaitingPayment(orderStatus)
      },
      showPayButton() {
        const { orderStatus } = this
        return isAwaitingPayment(orderStatus)
      },
    },
    data() {
      return {
        confirmPickupDialogVisible: false,
      }
    },
    methods: {
      handleTryAgain() {
        const { order: aOrder } = this
        const { items } = aOrder
        const cartItems = _.map(items, item => _.assign(new cart.CartItem(), {
          productId: item.productId,
          variantId: item.variantId,
          quantity: item.quantity,
          checked: true,
        }))
        const customerId = security.SecurityUserHolder.getUserId()
        Toast.loading()
        cart.CartServiceV1.addCartItems(customerId, cartItems)
          .then(() => this.$router.push(`/cart`))
          .finally(() => Toast.clear())
      },
      handleQueryShipment() {
        const { order: aOrder } = this
        this.$router.push(`/orders/${aOrder.id}/shipments`)
      },
      handleRefunds() {
        const { order: aOrder } = this
        this.$router.push(`/orders/${aOrder.id}/refunds`)
      },
      handleConfirmReceipt() {
        const { order: aOrder } = this
        this.$dialog.confirm({
          title: "确认收货",
          message: "确认收货后，订单交易完成，欠款将立即到达商家账户。",
        })
          .then(() => order.OrderServiceV1.receiptOrder(aOrder.id))
          .then(() => this.$emit("receipt"))
      },
      handleCancel() {
        const { order: aOrder } = this

        new Promise((resolve, reject) => {
          this.$dialog.confirm({
            confirmButtonText: "再考虑下",
            cancelButtonText: "取消订单",
            message: "订单还未付款，确定要取消吗？",
          }).then(reject).catch(resolve)
        })
          .then(() => order.OrderServiceV1.cancelOrder(aOrder.id))
          .then(() => this.$emit("cancel"))
      },
      handlePay() {
        const { order: aOrder } = this
        const { id, totalAmount } = aOrder
        this.$router.push({
          path: `/payments`, query: {
            total_amount: totalAmount,
            order_ids: id,
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;

        .van-button {
            margin-left: 9px;
            width: 80px;
        }
    }
</style>
